<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>返回顶部</title>
		<style type="text/css">
			body{
				height: 10000px;
				background: url(images/bg.png) repeat;
				background-size: contain;
			}
			.go_top_btn{
				width: 36px;
				height: 65px;
				background: url(images/go_top_btn.png);
				right:5%;
				bottom:5%;
				position: fixed;
				display: none;
			}
			.go_top_btn:hover{
				background-position:left 65px;
			}
		</style>
	</head>
	<body>
		<div class="go_top_btn"></div>
		
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var top_btn = $(".go_top_btn");
			var doc = $(document);
			top_btn.on("click",function(e){
				var scrollTop = doc.scrollTop();//1.先获取当前页面的垂直滚动距离
				var t = setInterval(function(){
					scrollTop-=100;
					if(scrollTop<=0){	//判断是否已经达到顶部
						scrollTop = 0;
						clearInterval(t);//如果到达，则取消该定时器
					}
					doc.scrollTop(scrollTop);//设置新的滚动距离
				},10);
			})
			
			
			//给页面加一个滚动事件的侦听
			doc.on("scroll",function(e){
				var scrollTop = doc.scrollTop();//1.先获取当前页面的垂直滚动距离
				if(scrollTop>0){
					top_btn.fadeIn(200);//.css("display","block")
				}else{
					top_btn.fadeOut(100);//.css("display","none")
				}
			})
			
			
			
			
		</script>
		
	</body>
</html>
